<template>
  <div>
    <div>
      <div class="guidelineTypeIcon">
        <img :src="img[type].img" :title="type" />
      </div>
      <div class="guidelineTypeIcon-hover">
        <img :src="img[type].imgHover" :title="type" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: {
        简答: {
          img: require("@/assets/images/answer.png"),
          imgHover: require("@/assets/images/answerHover.png"),
        },
        刷题: {
          img: require("@/assets/images/guidelineST.png"),
          imgHover: require("@/assets/images/guidelineST-hover.png"),
        },
        查阅: {
          img: require("@/assets/images/guidelineCy.png"),
          imgHover: require("@/assets/images/guidelineCy-hover.png"),
        },
        上传: {
          img: require("@/assets/images/upload.png"),
          imgHover: require("@/assets/images/upload-hover.png"),
        },
        归档: {
          img: require("@/assets/images/upload.png"),
          imgHover: require("@/assets/images/upload-hover.png"),
        },
        展示: {
          img: require("@/assets/images/link.png"),
          imgHover: require("@/assets/images/link-hover.png"),
        },
      },
    };
  },
  props: {
    type: String,
  },
};
</script>

<style lang="stylus" scoped>
.guidelineTypeIcon {
  img {
    object-fit: cover;
    width: 24px;
    height: auto !important;
  }
}

.guidelineTypeIcon-hover {
  display: none;

  img {
    object-fit: cover;
    width: 24px;
    height: auto !important;
  }
}

.guilineTypeIconFont {
  font-size: 28px;
  color: #cdcdcd;
}
</style>
